<template>
  <!-- 异常定价执行监控页面 -->

    <div class="expricingMonitor" >
         <span class="formTitle"
        ><i class="vertical-bar"></i>重定价定价任务监控</span
      >
      <el-form :model="monitorForm" ref="monitorRef" label-width="140px" label-position="right">
        <!-- <el-row>
        <el-col>定价任务监控</el-col>
        </el-row>-->
        <el-row>
          <el-col :span="6">
            <el-form-item label="任务编号：" prop="taskCode">
              <el-input v-model="monitorForm.taskCode" maxlength="32" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务名称：" prop="taskName">
              <el-input v-model="monitorForm.taskName" maxlength="32" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="定价编号：" prop="pricingCode">
              <el-input v-model="monitorForm.pricingCode" maxlength="32" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数据日期：" prop="dataDate">
              <el-date-picker
                v-model="monitorForm.dataDate"
                placeholder="请输入数据日期"
                disabled
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:90%;"
              ></el-date-picker>
              <!-- <el-input
              v-model="monitorForm.dataDate"
              maxlength="32"
              disabled
              ></el-input>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="定价情景：" prop="sceneName">
              <el-input v-model="monitorForm.sceneName" maxlength="32" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="情景版本：" prop="versionNum">
              <el-input v-model="monitorForm.versionNum" maxlength="32" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="曲线确认状态：" prop="affirm">
              <el-input
                v-if="monitorForm.affirm==1?true:false"
                v-model="affirmTrue"
                maxlength="32"
                disabled
              ></el-input>
              <el-col v-if="monitorForm.affirm==0?true:false" :span="24" width="40%">
                未确认
                <el-button @click="affirmPop()">确认曲线</el-button>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="刷新频率：" prop="refreshRate">
              <el-select
                v-model="monitorForm.refreshRate"
                @change="onChange"
                style="width:calc(100% - 20px)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in refreshRateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="container">
          <el-col style="margin-right:10px;" class="content-left">
            <upper-template :searchIcon="false" :configIcon="false">
              <!-- 操作按钮区 -->
              <template slot="buttonArea">
                <el-button @click="stopbtn()">停止</el-button>
                <el-button @click="resume()">继续</el-button>
                <el-button @click="toResultBtn()">查看结果</el-button>
                <el-button @click="toSubRecordBtn()">子任务</el-button>
                <el-button @click="goBack()">返回</el-button>
              </template>
            </upper-template>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="multipleModelTable"
        :data="tableModelData"
        style="width: 100%"
        @row-click="authorizeModelFor"
      >
        <el-table-column width="55" type="selection" ></el-table-column>
        <el-table-column prop="dataDate" label="数据日期" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="pdName" label="头寸表" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="finish" label="已成功" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="error" label="已失败" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="running" label="正在定价" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="init" label="未开始" :show-overflow-tooltip="true"></el-table-column>
      </el-table>

      <!-- 曲线确认页面 --------------------------- -->
      <el-dialog
        v-dialogDrag
        :title="affirmtitleName"
        :visible.sync="affirmDi"
        width="80%"
        top="2%"
        :append-to-body="true"
      >
        <positionaffirmForm ref="affirmForm" />
        <div slot="footer">
          <el-button @click="curveBack()">返 回</el-button>
        </div>
      </el-dialog>
      <!-- 曲线确认页面  结束 --------------------------- -->
    </div>

</template>
<script>
//时间转换
import moment from "moment";
import { getDict } from "@/api/getDict";
import { expricing, pricingTask, publicManage_pub } from "@/api/index";
import positionaffirmForm from "../pricingTask/curveDataAffirm_index";
export default {
  props: {
    //选中的值
    monitorForm: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      //曲线按钮
      affirmtitleName: "确认曲线",
      affirmDi: false,
      affirmTrue: "已确认",
      //刷新频率
      timer: null,
      //列表数据
      tableModelData: [],
      refreshRateOption: {}
    };
  },
  watch: {},
  components: {
    positionaffirmForm
  },
  created() {
    this.init();
    this.getRefrshRate("ftp_refresh_rate");
  },
  computed: {},
  mounted() {
    this.setTimeout(this.monitorForm.refreshRate);
    // this.setTimeout();
    //时间刷新
    // this.timer = setInterval(() => {
    //   setTimeout(this.queryCount, 0);
    // }, 1000 * this.monitorForm.refreshRate);
  },
  methods: {
    onChange(val) {
      clearInterval(this.timer);
      this.timer = null;

      let data = this.monitorForm.refreshRate;
      this.setTimeout(data);
    },
    setTimeout(data) {
      console.log();
      this.timer = setInterval(() => {
        this.queryCount();
      }, 1000 * data);
    },
    init() {

      //判断按钮是否可用
      if (this.monitorForm.pricingCode) {
        this.queryCount();
      }
      //判断是否都确认过曲线
      if (this.monitorForm.affirm == 0) {
        //验证曲线是否都确认过
        this.curveAffirm();
      }
    },
    //验证曲线是否确认
    curveAffirm() {
      publicManage_pub.checkAllAffirm().then(res => {
        if (res.code == 200) {
          this.monitorForm.affirm = 0;
        } else {
          this.monitorForm.affirm = 1;
        }
      });
    },
    affirmPop() {
      this.affirmDi = true;
    },
    //查看结果
    toResultBtn(){
        this.$emit("toCatDetail",this.monitorForm.pricingCode)
    },
    toSubRecordBtn() {
     let  data = {
        taskName: this.monitorForm.taskName,
        pricingCode: this.monitorForm.pricingCode,
        dataDate: this.monitorForm.dataDate,
        taskCode: this.monitorForm.taskCode
      };
    
      this.$emit("catSubTask",data);
    },
    //查询监控页面表格数据
    queryCount() {
      let params = "'" + this.monitorForm.pricingCode + "'";
      console.log(params);
      pricingTask.queryCount(params).then(res => {
        console.log(res, "监控表格返回数据222222");
        if (res.code == 200) {
          this.tableModelData = res.datas;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getRefrshRate(data) {
      getDict(data).then(res => {
        if (res.code == 200) {
          this.refreshRateOption = res.datas;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //点击行选中
    authorizeModelFor(row) {
      if (this.$refs.multipleModelTable) {
        this.$refs.multipleModelTable.clearSelection();
      }
      this.$refs.multipleModelTable.toggleRowSelection(row, true);
    },
    //停止
    stopbtn() {
      let data = {
        pricingCode: this.monitorForm.pricingCode
      };
      //调用停止异常定价
      expricing
        .stopExPricing(data)
        .then(res => {
          if (res.code == 200) {
            this.$emit("closeExMonitor");
            return this.$message.success(res.message);
          } else if (res.code) {
            return this.$message.error(res.message);
          }
        })
        .catch(err => {
          return this.$message.error("异常定价停止失败");
        });
    },

    resume() {
      let data = {
        pricingCode: this.monitorForm.pricingCode
      };
      //调用停止异常定价
      expricing
        .resume(data)
        .then(res => {
          if (res.code == 200) {
            this.$emit("closeExMonitor");
            return this.$message.success(res.message);
          } else if (res.code) {
            return this.$message.error(res.message);
          }
        })
        .catch(err => {
          return this.$message.error("异常定价启动失败");
        });
    },
    goBack() {
      this.$emit("closeExMonitor");
    },
    curveBack(){
       this.affirmDi = false;
       this.curveAffirm();
    }

  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>
<style lang="scss" scoped>
.el-col-3 {
  width: 40%;
}
.formTitle {
  font-size: 14px;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
</style>